<template>
  <!-- 修改合同 -->
  <div v-loading="loading" class="app-container">
    <div>
      <el-form ref="form" :model="form" label-width="90px">
        <el-row>
          <mainTilte title="合同主体信息" :left-title="allAmount" :center-title="centerTitle" />
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="需方">
              <el-input v-model.trim="form.company_name" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址">
              <el-input v-model.trim="form.company_address" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人">
              <el-input v-model.trim="form.company_contacts" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话">
              <el-input v-model.trim="form.company_mobile" disabled />
            </el-form-item>
          </el-col>
          <div class="underLine" />
          <el-col :span="8">
            <el-form-item label="供方">
              <el-input v-model.trim="form.supply.name" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址">
              <el-input v-model.trim="form.supply.address" disabled />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="联系人">
              <el-input v-model.trim="form.supply.contacts" disabled />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="电话">
              <el-input v-model.trim="form.supply.contacts_phone" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签订日期">
              <el-input v-model.trim="form.created_at" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <mainTilte title="商品清单明细信息" />
        </el-row>
        <el-table :data="form.products" stripe fit border class="mb24">
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-table :data="scope.row.package" border :stripe="false">
                <el-table-column prop="name" label="名称" min-width="100" />
                <!-- <el-table-column prop="number" label="数量" width="100" /> -->
                <el-table-column prop="length" label="尺寸公制(长)" width="100" />
                <el-table-column prop="width" label="尺寸公制(宽)" width="100" />
                <el-table-column prop="height" label="尺寸公制(高)" width="100" />
                <el-table-column prop="volume" label="体积" width="100" />
                <el-table-column prop="length_AS" label="尺寸美制(长)" width="100" />
                <el-table-column prop="width_AS" label="尺寸美制(宽)" width="100" />
                <el-table-column prop="height_AS" label="尺寸美制(高)" width="100" />
                <!-- <el-table-column prop="volume_AS" label="体积(美制)" width="100" /> -->
                <el-table-column prop="volume_weight_AS" label="体积重(美制)" width="100" />
                <el-table-column prop="weight_gross_AS" label="毛重(美制)" width="100" />
                <el-table-column prop="weight_AS" label="净重(美制)" width="100" />
                <el-table-column prop="oversize" label="Oversize" width="100" />
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="缩略图" width="150" align="center">
            <template slot-scope="scope">
              <thund :img="scope.row.goods_pic" />
            </template>
          </el-table-column>
          <el-table-column prop="goods_code" label="系统sku" align="center" />
          <el-table-column prop="goods_name" label="中文名称" align="center" />
          <el-table-column prop="goods_name_en" label="英文名称" width="180" align="center" />
          <el-table-column prop="number" label="采购数量" width="180" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.number }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="采购单价" width="180" align="center" />
          <el-table-column prop="amount" label="采购金额" width="180" align="center" />
        </el-table>
        <el-row>
          <mainTilte title="配件清单明细信息" />
        </el-row>
        <el-table :data="form.parts" stripe fit border class="mb24">
          <el-table-column label="缩略图" width="150" align="center">
            <template slot-scope="scope">
              <thund :img="scope.row.goods_pic" />
            </template>
          </el-table-column>
          <el-table-column prop="goods_code" label="系统sku" align="center" />
          <el-table-column prop="goods_name" label="中文名称" align="center" />
          <el-table-column prop="number" label="采购数量" width="180" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.number }}</p>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <mainTilte title="合同附件" />
        </el-row>
        <ul class="contract-file">
          <li v-for="(item, index) in fileList" :key="index" class="contract-file-item" @click="previewFile(item)">
            <i class="el-icon-document" />
            <span class="contract-file-item-name">{{ item.name }}</span>
          </li>
          <li />
        </ul>
        <el-row>
          <mainTilte title="合同条款" />
        </el-row>
        <div>
          <ckEditor :past-editor.sync="form.content" :is-read-only="true" />
        </div>
        <el-row>
          <el-form-item class="text-center">
            <el-button type="primary" :loading="printContractLoading" @click="printContract">打印合同</el-button>
            <el-button v-if="form.audit_status==1" type="primary" :loading="printProductCodeLoading" @click="printProductCode">打印产品码</el-button>
            <el-button @click="$router.go(-1)">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <previewProductCode ref="previewCode" />
  </div>
</template>

<script>
import list from '@/layout/mixin/list'
import thund from '@/components/base/thund'
import { downloadUrl } from '@/utils/index'
import previewProductCode from '../components/previewProductCode.vue'
export default {
  name: 'PurchaseContractDetails',
  components: {
    thund,
    previewProductCode
  },
  mixins: [list],
  data() {
    return {
      centerTitle: '',
      allAmount: '',
      value: '',
      value1: [],
      form: {
        company_name: '',
        company_address: '',
        company_contacts: '',
        company_mobile: '',
        supply: {},
        products: []
      },
      fileList: [],
      contrctForm: {},
      isReadOnlyEdit: false,
      contractId: '',
      loading: false,
      printContractLoading: false,
      printProductCodeLoading: false
    }
  },
  created() {
    // 调用全局混合方法 第一个参数是请求地址对应的名称（api.js），第二个为参数
    // this.initTableData(this.$api.fwRoleList.queryPage, this.params);
  },
  mounted() {
    if (this.$route.query.id) {
      this.contractId = this.$route.query.id
      this.getContrctData()
    }
  },
  methods: {
    //
    previewFile(item) {
      downloadUrl(item.url)
    },
    // 打印合同
    printContract() {
      const vm = this
      vm.printContractLoading = true
      vm.$http.get(`/purchase-contract/conver/contract-to-pdf/${vm.contractId}`).then(res => {
        downloadUrl(res.data.file)
        vm.printContractLoading = false
      }).catch(() => {
        vm.printContractLoading = false
      })
    },
    // 打印产品码
    printProductCode() {
      // const vm = this
      // vm.printProductCodeLoading = true
      // vm.$http.get(`/purchase-contract/product/barcorde/${vm.contractId}`).then(res => {
      //   downloadUrl(res.data.iamge)
      //   vm.printProductCodeLoading = false
      // }).catch(() => {
      //   vm.printProductCodeLoading = false
      // })
      const vm = this
      vm.$refs.previewCode.show(vm.contractId, vm.form.products, vm.form.parts)
    },
    bulkShipment() {
      this.dialogAddVisible = true
    },
    // 新增-保存
    saveData() { },
    // 采购员数据
    getContrctData() {
      this.loading = true
      this.$http
        .get(`/purchase-contract/${this.contractId}`)
        .then((res) => {
          if (res.code === 10000) {
            // console.log('res-----------------')
            // console.log(res.data.attachment)
            this.form = res.data
            this.allAmount = '采购总金额:' + this.form.amount + ''
            this.centerTitle = '合同编码：' + this.form.code
            this.form.products.forEach((element) => {
              element['isEditNumber'] = !!element.number
              element['hasChildren'] = element.package.length > 0
            })
            this.form.parts.forEach((ele) => {
              ele['isEditNumber'] = !!ele.number
            })
            const fileList = []
            for (const key in res.data.attachment) {
              if (Object.hasOwnProperty.call(res.data.attachment, key)) {
                const value = res.data.attachment[key]
                const name = value.split('/').pop()
                fileList.push({ name, url: value })
              }
            }
            this.fileList = fileList
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped>
.app-container /deep/ .el-date-editor,
.el-select {
  width: 100%;
}
.text-center {
  text-align: center;
  margin-top: 20px;
}
.contract-file {
  list-style: none;
}
.contract-file .contract-file-item {
  display: inline-block;
  width: 25%;
  line-height: 36px;
  color: #333;
  cursor: pointer;
}
.contract-file .contract-file-item:hover {
  color: #7ca4d2;
}
.contract-file .contract-file-item > i {
  font-size: 36px;
}
</style>
